<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="/LayUi/lib/css/layui.css">
  <script src="/vue2/js/vue.js"></script>
  <script src="/lib/jquery.min.js"></script>
  <script src="/LayUi/lib/layui.js"></script>
</head>
<body>
  <div id="app" class="layui-container">
    <!-- 订单表格 -->
    <table class="layui-table">
      <thead>
        <tr>
          <th>产品名称</th>
          <th>数量</th>
          <th>单价（元）</th>
          <th>金额（元）</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in orderItems" :key="index">
          <td>
            <input type="text" v-model="item.product" class="layui-input">
          </td>
          <td>
            <input type="number" v-model="item.quantity" @change="calculateTotal" class="layui-input">
          </td>
          <td>
            <input type="number" v-model="item.price" @change="calculateTotal" class="layui-input">
          </td>
          <td>{{ item.quantity * item.price || 0 }}</td>
          <td>
            <button @click="removeRow(index)" class="layui-btn layui-btn-danger">删除</button>
          </td>
        </tr>
      </tbody>
    </table>

    <!-- 操作按钮 -->
    <button @click="addRow" class="layui-btn layui-btn-normal">新增一行</button>
    
    <!-- 总计 -->
    <div class="layui-form-mid layui-word-aux">总计：{{ total }} 元</div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        orderItems: [{ product: '', quantity: 1, price: 0 }],
        total: 0
      },
      mounted() {
        layui.use('form', () => this.form = layui.form);
      },
      methods: {
        // 新增行
        addRow() {
          this.orderItems.push({ product: '', quantity: 1, price: 0 });
          this.$nextTick(() => this.form.render()); // 刷新Layui样式
        },
        // 删除行
        removeRow(index) {
          this.orderItems.splice(index, 1);
          this.calculateTotal();
        },
        // 计算总计
        calculateTotal() {
          this.total = this.orderItems.reduce((sum, item) => 
            sum + (item.quantity * item.price || 0), 0
          );
        }
      },
      watch: {
        // 深度监听数据变化
        orderItems: {
          handler: 'calculateTotal',
          deep: true
        }
      }
    });
  </script>
</body>
</html>
